<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('学员成绩')"/>
    <th:block th:include="include :: select2-css"/>

    <style>
        .score-div{
            width: 150px;
            /*background-color: rgba(0, 0, 0, 0.19);*/
        }
        .bootstrap-table .fixed-table-container .table th, .bootstrap-table .fixed-table-container .table td {
            vertical-align: top;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form" autocomplete="off">
            <input id="childId" name="childId" th:value="*{childId}" hidden="true">
            <div class="select-list">
                <ul>
                    <li>
                        <div style="display: flex;flex-direction:row;flex-wrap: wrap">
                        <label class="font-noraml">上课时间：</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="dateRange" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                        </div>
                    </li>
                    <li>
                        </label>老师姓名：</label>
                        <input type="text" id="teacherName" name="teacherName" />
                    </li>

                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
<!--                    <li>-->
<!--                        <label style="margin-right: 15px">上课时间: </label>-->
<!--                        <div class="input-group date">-->
<!--                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                            <input id="dayDate" name="dayDate" type="text" class="col-sm-3 control-label"-->
<!--                                   placeholder="yyyy-MM-dd">-->
<!--                            <label style="width: 25px"></label>-->
<!--                            <label>老师姓名：</label>-->
<!--                            <input id="teacherName" type="text" class="col-sm-3 control-label '+searchTeacherFlag+'"-->
<!--                                   name="teacherName"/>-->
<!--                            <label style="width: 25px"></label>-->

<!--                            <label style="width: 25px"></label>-->
<!--                            <a class="btn btn-primary btn-rounded btn-sm" style="margin-right: 5px;" onclick="$.table.search()"><i-->
<!--                                    class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i-->
<!--                                    class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                        </div>-->
<!--                    </li>-->
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <label style="font-weight: bold;font-size: 15px" name="childInfo" th:text="*{childInfo}"></label>
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    // 权限
    // 字典
    var prefix = ctx + "business/courseChildScore";

    $(function () {
        layui.use('laydate', function () {
            layui.laydate.render({
                elem: '#dateRange',
                range: true
            });
        })
        var options = {
            url: prefix + "/childScoreDetailList",
            queryParams: queryParams,
            modalName: "数据",
            columns: [
                {
                    field: 'childCourseId',
                    title: '课程ID',
                    visible: false
                },
                {
                    field: 'classTimes',
                    title: '课节',
                    formatter: function (value, row, index) {
                        return $.table.serialNumberDesc(index);
                    }
                },
                {
                    field: 'dayDate',
                    title: '课程信息',
                    formatter: function (value, row, index) {
                        var action = '';
                        action += value + '<br>';
                        action += row.startTime + '-' + row.endTime;
                        action += '<br>';
                        action+=row.teacherName;
                        action += '<br>';
                        action += row.className;
                        return action;
                    }
                },
                {
                    field: 'projectName1',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,1);
                    }
                },
                {
                    field: 'projectName2',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,2);
                    }
                },
                {
                    field: 'projectName3',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,3);
                    }
                },
                {
                    field: 'projectName4',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,4);
                    }
                },
                {
                    field: 'projectName5',
                    title: '项目成绩',
                    formatter: function (value, row, index) {
                        return formatScore(row,5);
                    }
                },
                {
                    field: 'projectName6',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,6);
                    }
                },
                {
                    field: 'projectName7',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,7);
                    }
                },
                {
                    field: 'projectName8',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,8);
                    }
                },
                {
                    field: 'projectName9',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatScore(row,9);
                    }
                },
            ]
        };
        $.table.init(options);
    });

    function scoreDetail(childId) {
        var url = prefix + "/childScoreDetail/" + childId;
        $.modal.openTab("成绩记录", url);
    }

    function formatScore(row,index) {
        var html = "<div class='score-div'>";
        var projectName =row['projectName'+index];
        var projectCode = row['projectCode'+index]
        var question =row['projectQuestion'+index]==""?"":JSON.parse(row['projectQuestion'+index]);
        var score =(row['projectScore'+index]=="" || row['projectScore'+index]=="{}")?"":JSON.parse(row['projectScore'+index]);
        if(question==""){
            return "";
        }
        html+="<label style='font-size: 16px;font-weight: bold'>"+projectName+"</label><br>";
        for(var i in question){
            var temp="";
            var obj = question[i];
            if(score !=null && score !='' && score[obj.key] !=undefined){
                temp = score[obj.key];
                if(temp!=undefined && temp !="" && obj.type=='checkBox'){
                    temp=(temp=="on" ?"是":"否");
                }
                if(temp!=undefined && temp !="" && obj.type=='select'){
                    for(var k in obj.option){
                        if(temp == obj.option[k].value){
                            temp = obj.option[k].text;
                            break;
                        }
                    }
                }
            }
            html+="<label>"+obj.lable+"："+temp+"</label><br>";
        }

        html += "</div>";
        html+="<a onclick='viewHistory(\""+projectCode+"\")'><u>历史</u></a>";
        return html;
    }

    function viewHistory(projectCode) {
        var url = prefix + "/childScoreHistory/" + $("#childId").val()+"/"+projectCode;
        $.modal.open("历史成绩", url, '900', '720');
    }
    function queryParams(params) {
        var search = $.table.queryParams(params);
        var selectIndex = window.parent.document.getElementById('parentSchoolList').selectedIndex;
        if (selectIndex >= 0) {
            var centerId = window.parent.document.getElementById('parentSchoolList').options[selectIndex].value;
            search.centerId = centerId;
        }
        var teacherName = $('#teacherName').val();
        var dateRange = $('#dateRange').val();
        search.teacherName = teacherName;
        search.dateRange = dateRange;
        return search;
    }


</script>
</body>

</html>